<template>
  <div>
    <!--  控制侧边栏隐藏展示  -->


    <!-- 一级菜单 -->
    <el-menu default-active="首页" class="el-menu-vertical-demo" active-text-color="#ffd04b" background-color="#545c64"
             text-color="white" style="height: 100vh"
             :collapse="isCollapse">
      <h3 ref="h3">{{ IsAsideh3 }}</h3>

      <el-menu-item :index="noChildren.label" v-for="noChildren in noChildrens" :key="noChildren.label"
                    @click="Redirects(noChildren.path)">
        <i :class="'el-icon-'+noChildren.icon"></i>
        <span slot="title">{{ noChildren.label }}</span>
      </el-menu-item>

      <!-- 二级菜单 -->
      <el-submenu :index="haveChildren.label" v-for="haveChildren in haveChildrens" :key="haveChildren.label">
        <template slot="title">
          <i :class="'el-icon-'+haveChildren.icon"></i>
          <span slot="title">{{ haveChildren.label }}</span>
        </template>

        <el-menu-item-group v-for="Children in haveChildren.children" :key="Children.label">
          <el-menu-item :index="Children.label" @click="Redirects(Children.path)">
            <span>{{ Children.label }}</span>
          </el-menu-item>
        </el-menu-item-group>

      </el-submenu>

    </el-menu>

  </div>
</template>

<script>
// import getRequest from "@/Network/axios";
import {mapState} from 'vuex';

export default {
  name: "IsAside",

  data() {
    return {
    }
  },


  methods: {
    //跳转路由
    Redirects(path) {
      this.$router.replace({
        path: path
      })

    }
    ,
  }
  ,

  computed: {

    //计算出只有一级导航的导航栏
    noChildrens() {
      return this.$store.state.navs.filter(nav => {
        return !nav.children && nav.label !== '购买商品'
      })
    }
    ,

    //计算出有一级二级导航的导航栏
    haveChildrens() {
      return this.$store.state.navs.filter(nav => {
        return nav.children
      })
    },
    ...mapState(['isCollapse', 'IsAsideh3'])
  },


}
</script>

<style scoped>


h3 {
  text-align: center;
  margin: 20px 0;
  color: white;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
